<template>
    <div class="superBox">
    <div class="superMain mgt-30 max_w-1200">
      <div style="width:100%" class="mgb-20"><Title /></div>
      <div class="flex-s-between">
        <div style="width:45%">
          <info :infoData="infoData" />
        </div>
        <div class="rightBox" style="width:42%">
          <div class="imgItem border-1 border-r pd-20 center_a">
            <img class="bd-r-10" src="../../assets/img/sell.jpg" alt="" style="width:100%"/>
          </div>
          <div class="btn mgt-10">
            <div class="btn-t" style="width:40%">
              <p class="fontW-7 font-20 font-f-ib color-f text-c">{{$t('buypage.bidPrice')}}</p>
              <div class="btn-t-inp flex border-3 bg-f border-r">
                <el-input v-model="input" placeholder="33"></el-input>
                <img src="../../assets/icon/offer.svg" alt="">
              </div>
              <div class="fontW-7 font-14 color-a font-f-ib text-r">160000<img src="../../assets/icon/dollar.svg" alt="" style="margin:0 5px 2px 2px"></div>
            </div>
            <div class="mgt-10">
              <el-button type="primary" class="bg-theme border-n" style="width:40%">{{$t('btn.bidding')}}</el-button>
            </div>
          </div>
        </div>
      </div>
      <p class="font-25 fontW-7 font-f-ib color-af47 pdl-35 mgt-20">{{$t('title.history_bids')}}</p>
      <offer :offerData="offerData"/>
      <p class="font-25 fontW-7 font-f-ib color-af47 pdl-35 mgt-20 ">{{$t('title.vitality')}}</p>
      <activity :activityData="activityData"/>
    </div>
  </div>
</template>
<script>
import Title from '../../components/component/Title'
import Info from '../../components/component/Info'
import Offer from '../../components/component/Offer'
import Activity from '../../components/component/Activity'
const offerData = [
  {id: 1, name: '黄东东', offer: 99, address: '0xja82...f2c6', percent: '+3.7%', time: '22:30 22/05/2022', img_url: require('../../assets/img/tx1.svg'), num: 1},
  {id: 2, name: '盖民', offer: 36, address: '0xja82...f2c6', percent: '+3.7%', time: '22:30 22/05/2022', img_url: require('../../assets/img/tx2.svg'), num: 1},
  {id: 3, name: '郑雅涵', offer: 33.5, address: '0xja82...f2c6', percent: '-3.7%', time: '22:30 22/05/2022', img_url: require('../../assets/img/tx3.svg'), num: 2}
]
const activityData = [
  {id: 1, affair: '出售', price: 0.05, from: 'Superman', to: 'Superman', time: '22:30 22/05/2022', img_url: require('../../assets/icon/xing.svg'), img_url2: require('../../assets/ETH/ETH.svg')},
  {id: 2, affair: '出售', price: 0.05, from: 'Superman', to: 'Superman', time: '22:30 22/05/2022', img_url: require('../../assets/icon/xing.svg'), img_url2: require('../../assets/ETH/ETH.svg')}
]
const infoData = [
  {name: 'jecica', royalties: '版税:2.5%', id: 3461, chain: 10036037, malechain: 'Ethereum', type: 'ERC-721', addres: '0x642a...fc2e', creationTime: '2022-01-22 10:03:24'}
]
export default {
  components: {
    Title,
    Info,
    Offer,
    Activity
  },
  data () {
    return {
      offerData: offerData,
      activityData: activityData,
      infoData: infoData,
      input: ''
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.el-input__inner{
  text-align: right;
  background: none;
  border:none;
}
/deep/.el-button--primary:focus, .el-button--primary:hover{
      background: #7de9ff;
}
</style>
